<template>
          <div class="n-songtb">
            <div class="u-title u-title-1 f-cb">
              <h3>
                <span class="f-ff2">{{title}}</span>
              </h3>
              <!--<span class="sub s-fc3"><span id="playlist-track-count">{{list.trackCount}}</span>首歌</span>-->
            </div>
            <div id="song-list-pre-cache" data-simple="0">
              <div oncopy="return false;" oncut="return false;" ondragstart="return false;"
                   id="auto-id-xgcPso3r7UDTlBNf">
                <div class="j-flag" id="auto-id-rfTGwS5VKLMzSyCF">
                  <table class="m-table ">
                    <thead>
                    <tr>
                      <th class="first w1">
                        <div class="wp">&nbsp;</div>
                      </th>
                      <th>
                        <div class="wp">歌曲标题</div>
                      </th>
                      <th class="w2">
                        <div class="wp">时长</div>
                      </th>
                      <th class="w3">
                        <div class="wp">歌手</div>
                      </th>
                      <th class="w4">
                        <div class="wp">专辑</div>
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="1931211497259431552" class="even " v-for="(item,index) in list.tracks">
                      <td class="left">
                        <div class="hd ">
                          <span class="ply" @click="play(item)">&nbsp;</span>
                          <span class="num">{{index+1}}</span></div>
                      </td>
                      <td class="">
                        <div class="f-cb">
                          <div class="tt">
                            <div class="ttc"><span class="txt">
                              <!--<a href="/song?id=193121"><b-->
                              <!--title="风云 - (电影《风云-雄霸天下》主题曲)">风云</b>-->
                              <!--</a>-->
                              <router-link :to="{path:'song',query:{id:item.id}}">
                                <b :title="item.name">{{item.name}}</b>
                              </router-link>
                              <!--<span title="电影《风云-雄霸天下》主题曲" class="s-fc8"> - (电影《风云-雄霸天下》主题曲)</span>-->
                              </span>
                            </div>
                          </div>
                        </div>
                      </td>
                      <td class=" s-fc3"><span class="u-dur ">{{item.dt|MillisecondToDate}}</span>
                        <div class="opt hshow"><a class="u-icn u-icn-81 icn-add" href="javascript:;" title="添加到播放列表"
                                                  hidefocus="true" data-res-type="18" :data-res-id="item.id"
                                                  data-res-action="addto" data-res-from="13"
                                                  :data-res-data="list.id"></a><span :data-res-id="item.id"
                                                                                     data-res-type="18"
                                                                                     data-res-action="fav"
                                                                                     class="icn icn-fav"
                                                                                     title="收藏"></span><span
                          :data-res-id="item.id" data-res-type="18" data-res-action="share" :data-res-name="item.name"
                          :data-res-author="item.singer"
                          :data-res-pic="item.al.picUrl"
                          class="icn icn-share" title="分享">分享</span><span :data-res-id="item.id" data-res-type="18"
                                                                          data-res-action="download" class="icn icn-dl"
                                                                          title="下载"></span></div>
                      </td>
                      <td class="">
                        <div class="text" :title="item.singer"><span :title="item.singer">
                          <!--<a class="" href="/artist?id=6491" hidefocus="true">{{item.singer}}</a>-->
                           <router-link :to="{path:'artist',query:{id:a.id}}" hidefocus="true" v-for="(a,index) in item.ar" :key="a.id">{{a.name}}<a v-if="index!=item.ar.length-1">/</a></router-link>
                        </span>
                        </div>
                      </td>
                      <td class="">
                        <div class="text">
                          <!--<a href="/album?id=19480" title="风云-雄霸天下(电影原声大碟)">风云-雄霸天下(电影原声大碟)</a>-->
                          <router-link :to="{path:'album',query:{id:item.al.id}}" :title="item.al.name">{{item.al.name}}</router-link>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="j-flag"></div>
              </div>
            </div>
          </div>
</template>

<script>

  import {playlistDetail} from  './../service/getDate';

  export default {
    name: 'songList',
    props: {
      songListId: {
        type: String,
        default: function () {
          return { message: '2313779410' }
        }
      },
      title: {
        type: String
      }

    },
    data () {
      return {
        list: []
      }
    },
    methods: {
      play(item){
        this.$store.commit('addQueue',item);
        this.$store.dispatch('getMusicUrl')
      },
      allin(){
        this.$store.commit('addAll',this.list.tracks);
        this.$store.dispatch('getMusicUrl')
      }
    },
    mounted(){
      playlistDetail(this).get({
        detail: 'detail',
        id: this.songListId
      }).then(res => {
        console.log(res);
        this.list = res.body.playlist;
        this.list.tracks.forEach(function (value, key) {
          value.singer = "";
          value.ar.forEach(function (val, k) {
            value.singer += val.name + '/'
          });
          value.singer = value.singer.substr(0, value.singer.length-1);
        })
      });

    },
    components: {
      playlistDetail
    }
  }
</script>

<style>
  .u-icn, .u-title-1 .out .icon {
    background: url(../image/icon.png) no-repeat 0 9999px;
  }

  .u-cover img {
    display: block;
    width: 100%;
    height: 100%;
  }

  img, .txt {
    border: 0;
  }


  .m-info .hd {
    position: relative;
    margin: 0 0 12px;
    line-height: 24px;
  }
  em, i {
    font-style: normal;
    text-align: left;
    font-size: inherit;
  }

  .m-info .hd h2 {
    line-height: 24px;
    font-size: 20px;
    font-weight: normal;
  }


  .f-ff2 {
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  }

  .f-cb:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }

  .m-info .user {
    margin: 0 0 20px;
    line-height: 35px;
  }

  .m-info .user .face {
    margin-right: 10px;
  }

  a, a *, .f-hand, .f-hand * {
    cursor: pointer;
  }

  a {
    text-decoration: none;
    color: #333;
  }

  .m-info .user .face, .m-info .user .face img {
    float: left;
    width: 35px;
    height: 35px;
  }

  .m-info .user .name {
    float: left;
  }

  a:hover {
    text-decoration: underline;
    color: #333;
  }

  .m-info .user .u-icn {
    float: left;
    margin: 9px 0 0 3px;
  }


  .m-info .user .time {
    margin-left: 15px;
  }


  .m-info .btns {
    margin-bottom: 25px;
    margin-right: -10px;
  }

  .u-btni-addply i {
    padding: 0 7px 0 8px;
  }

  .u-btn2-2 i {
    color: #fff;
    background-position: 0 -387px;
  }

  .u-btn2 i {
    padding: 0 15px 0 20px;
    pointer-events: none;
  }

  .u-btni-addply i {
    padding: 0 7px 0 8px;
  }

  .u-btn2, .u-btn2 i {
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
  }

  .u-btni-addply .ply {
    float: left;
    width: 20px;
    height: 18px;
    margin: 6px 2px 2px 0;
    background-position: 0 -1622px;
    overflow: hidden;
  }


  .u-btni-fav i {
    background-position: 0 -977px;
  }

  .u-btni-share i, .u-btni-fav i, .u-btni-cmmt i, .u-btni-dl i, .u-btni-unfav i {
    padding-right: 2px !important;
    padding-left: 28px !important;
  }

  .u-btni i {
    padding: 0 7px 0 36px;
  }

  .u-btni, .u-btni i {
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
  }

  .m-info .btns2 .u-btni, .m-info .btns .u-btni {
    margin-right: 6px;
    font-family: simsun, \5b8b\4f53;
  }

  .m-info .btns .u-btni-add {
    margin-right: 5px !important;
  }

  .u-btni-share i {
    background-position: 0 -1225px;
  }

  .u-btni-dl i {
    background-position: 0 -2761px;
  }

  .u-btni-cmmt i {
    background-position: 0 -1465px;
  }

  .m-info .tags {
    margin: 25px 0 5px;
    line-height: 22px;
  }

  .m-info .tags b {
    float: left;
  }

  .m-info b {
    font-weight: normal;
    color: #666;
  }

  .m-info .tags .u-tag {
    float: left;
    margin: 0px 10px 3px 0;
  }

  .u-tag i {
    position: relative;
    zoom: 1;
    padding: 0 3px 0 13px;
    background-position: 0 0;
  }

  .u-tag, .u-tag i {
    float: left;
    height: 22px;
    line-height: 22px;
  }

  .m-info .intr {
    margin-top: 4px;
    line-height: 18px;
    color: #666;
  }

  .m-info .intr b {
    display: inline-block;
  }

  .m-info b {
    font-weight: normal;
    color: #666;
  }

  /*歌曲列表*/

  .n-songtb {
    margin-top: 27px;
  }

  .u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;
  }

  .u-title-1 {
    height: 33px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
  }

  .u-title h3 {
    float: left;
    font-size: 24px;
    font-weight: normal;
  }

  .u-title-1 h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .f-ff2 {
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  }

  .s-fc3, a.s-fc3:hover {
    color: #666;
  }

  .u-title .sub {
    float: left;
    margin: 13px 0 0 10px;
  }

  .u-title-1 .sub {
    margin: 9px 0 0 20px;
  }

  .u-title .more {
    float: right;
    margin-top: 14px;
  }

  .u-title-1 .more {
    margin-top: 5px;
  }


  strong, b {
    font-weight: bold;
  }

  .u-title-1 .out {
    margin-top: 5px;
    float: right;
  }

  .u-title .out-list {
    margin-right: 20px;
  }

  .u-title .out {
    margin-right: 20px;
  }



  table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
  }

  .m-table {
    width: 100%;
    border: 1px solid #d9d9d9;
  }

  thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .m-table th, .m-table th .wp, .m-table td, .m-table .ply, .m-table .mv, .m-table .icn, .m-info .edit {
    background: url(../image/table.png) no-repeat 0 9999px;
  }

  .m-table th {
    vertical-align: top;
    text-align: left;
    font-weight: normal;
    color: #666;
  }

  .m-table th {
    height: 38px;
    background-color: #f7f7f7;
    background-position: 0 0;
    background-repeat: repeat-x;
  }

  .m-table .w1 {
    width: 74px;
  }

  .m-table th .wp {
    height: 18px;
    line-height: 18px;
    padding: 8px 10px;
    background-position: 0 -56px;
  }

  .m-table th.first .wp {
    background: none;
  }

  .m-table td {
    padding: 6px 10px;
    line-height: 18px;
    text-align: left;
  }

  .m-table .hd {
    height: 18px;
  }

  .m-table .ply {
    width: 17px;
    height: 17px;
    cursor: pointer;
    background-position: 0 -103px;
  }

  .m-table .ply {
    float: left;
  }

  .m-table .hd .ply {
    float: right;
  }

  .m-table .hd .num {
    width: 25px;
    margin-left: 5px;
    color: #999;
  }

  .m-table .tt {
    float: left;
    width: 100%;
  }

  .m-table .ttc {
    height: 18px;
    margin-right: 20px;
  }

  .m-table .txt {
    position: relative;
    display: inline-block;
    padding-right: 25px;
    margin-right: -25px;
    max-width: 99%;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-table b {
    font-weight: normal;
  }

  .m-table tr:nth-child(odd) td {
    background-color: #f7f7f7;
  }

  user agent stylesheet
  :focus {
    outline: -webkit-focus-ring-color auto 5px;
  }

  .m-table .opt {
    float: left;
  }

  .m-table .hshow {
    display: none;
  }

  .u-icn-13 {
    width: 54px;
    height: 24px;
    background-position: 0 -243px;
  }

  .u-icn, .u-icn2, .u-icn3 {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
  }

  .u-icn-81 {
    width: 13px;
    height: 13px;
    background-position: 0 -700px;
  }

  .m-table .u-icn-81 {
    float: left;
    margin-top: 2px;
  }

  .m-table .icn-fav {
    background-position: 0 -174px;
  }

  .m-table .mv, .m-table .icn {
    float: left;
    width: 18px;
    height: 16px;
    margin: 2px 0 0 4px;
    overflow: hidden;
    text-indent: -999px;
    cursor: pointer;
  }

  .m-table .icn-share {
    background-position: 0 -195px;
  }

  .m-table .icn-dl {
    background-position: -81px -174px;
  }

  .m-table .text a {
    white-space: nowrap;
  }

  .m-table .mv, .m-table .icnfix {
    position: absolute;
    top: 0;
    right: 0;
  }

  .m-table .mv {
    width: 23px;
    height: 17px;
    margin: 1px 0 0 0;
    background-position: 0 -151px;
  }

  .m-table .text {
    width: 100%;
    position: relative;
    zoom: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
